<template>
  <div class="product-page">
    <TitleName
      title="产品报价"
      icon="i-carbon-bookmark-filled"
      class="title text-#000 ml-20px"
    ></TitleName>
    <avue-crud
      ref="crudProduct"
      :option="crudOptionProduct"
      :data="productList"
    >
      <template #empty>
        <div>暂无数据</div>
      </template>
      <template #footer>
        <el-col :span="24" class="py-2 text-right">
          产品记录数：<span class="text-blue-500"
            >{{ countCrudData.num }}条</span
          >
          产品总数：<span class="text-blue-500">{{ countCrudData.total }}</span
          >个 产品总售价：<span class="text-blue-500"
            >{{ countCrudData.totalDiscountPrice }}元</span
          >
        </el-col>
      </template>
    </avue-crud>
  </div>
</template>
<script setup name="productForm">
import { reactive, getCurrentInstance, toRefs } from 'vue'
import { useRouter } from 'vue-router'
import {
  measurement_unit //产品单位
} from '@/hooks/dict/business.js'
const { proxy } = getCurrentInstance()
// 通用数据store
const router = useRouter()
const route = useRoute()
const props = defineProps({
  productInfo: {
    type: Array
  }
})
const data = reactive({
  productList: props.productInfo,
  countCrudData: {},
  crudOptionProduct: {
    header: false,
    menu: false,
    delBtn: false,
    editBtn: false,
    addBtn: false,
    addRowBtn: false,
    saveBtn: false,
    cancelBtn: false,
    cellBtn: false,
    // searchBtn: false,
    refreshBtn: false,
    columnBtn: false,
    menuWidth: 100,
    column: [
      {
        label: '产品名称',
        prop: 'name',
        cell: false,
        width: '180',
        rules: [
          {
            required: true,
            message: '请输入产品名称',
            trigger: 'blur'
          }
        ]
      },
      {
        label: '产品编号',
        prop: 'number',
        cell: false
      },
      {
        label: '规格型号',
        prop: 'specification',
        cell: false
      },
      {
        label: '单位',
        prop: 'unit',
        type: 'select',
        dicData: measurement_unit,
        cell: false
      },
      {
        label: '标准单价',
        prop: 'price',
        rules: [
          {
            required: true,
            message: '请输入标准单价',
            trigger: 'blur'
          }
        ],
        cell: false
      },
      {
        label: '数量',
        prop: 'num',
        type: 'number',
        min: 0,
        class: 'w-full',
        precision: 0,
        rules: [
          {
            required: true,
            message: '请输入数量',
            trigger: 'blur'
          }
        ],
        cell: true
      },

      {
        label: '备注',
        prop: 'remark',
        // type: 'textarea',
        // maxRows: 1,
        rules: [
          {
            required: false,
            message: '请输入备注',
            trigger: 'blur'
          }
        ],
        cell: true
      }
    ]
  }
})
const { productList, crudOptionProduct, countCrudData } = toRefs(data)
onMounted(() => {
  // 计算产品数据
  countCrudData.value = computed(() => {
    let obj = {
      num: 0,
      total: 0,
      totalDiscountPrice: 0
    }
    if (productList.value && productList.value.length > 0) {
      productList.value.forEach(item => {
        obj.total = Number(item.num) + Number(obj.total)
        obj.totalDiscountPrice =
          Number(item.price) * Number(item.num) + Number(obj.totalDiscountPrice)
        //产品总数：countCrudData.total
        //产品总金额：countCrudData.totalDiscountPrice
        //产品总金额： countCrudData.totalPrice
      })
      obj.num = productList.value.length
    }
    return obj
  })
})

async function init() {
  console.log('productList', productList.value)
}
init()
</script>
<style lang="scss" scoped>
.product-page {
  display: block;
}
</style>
